<template>
  <div>
    <div v-loading="loading" class="platform-list min-h-600px">
      <el-row :gutter="20">
        <el-col v-for="(item, key) in platformList" :key="key" :span="6" class="mb-5">
          <platform-card :item="item" />
        </el-col>
      </el-row>
      <el-empty v-if="!loading && platformList.length === 0" class="mt-25vh" description="平台为空，点击右上角创建" />
    </div>

    <el-pagination
      background
      layout="total,prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="pageSize"
      @current-change="currentChange"
    />
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { getPlatformList } from '@/api/customer/platform'
import PlatformCard from './PlatformCard.vue'

defineOptions({
  name: 'DkCustomerPlatformList'
})

const props = defineProps({
  type: {
    default: '',
    type: String
  }
})

const loading = ref(true)
const page = ref(1)
const pageSize = ref(8)
const total = ref(0)
const platformList = ref([])
const searchData = reactive({
  name: '',
  type: ''
})
const order = 'sort desc plaid desc'
const types = {
  wechat: 1,
  free: 5,
  'work-wechat': 3,
  douyin: 4,
  app: 2
}

const searchType = () => {
  searchData.type = types[props.type]
  getList(page.value)
}

const currentChange = (newPage) => {
  loading.value = true
  getList(newPage)
}

const getList = (currentPage) => {
  platformList.value = []
  page.value = currentPage
  getPlatformList(currentPage, pageSize.value, searchData, order).then((res) => {
    platformList.value = res.data
    total.value = parseInt(res.msg)
    loading.value = false
  })
}

watch(
  () => props.type,
  (val) => {
    searchType()
  }
)

onMounted(() => {
  searchType()
})
</script>
